<template>
    <div>
        <el-card>
            <el-row :gutter="12">
                <el-col :span="4">
                    <el-input placeholder="请输入订单号" class="input-with-select" size="small" v-model="queryInfo.id">
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" size="small" @click="queryOrder">查找</el-button>
                </el-col>
            </el-row>
        </el-card>

        <el-card style="margin-top: 10px" v-show="order.id">
          <el-descriptions title="订单详情" class="margin-top" :column="7" border>
            <el-descriptions-item label="订单号">{{ order.id }}</el-descriptions-item>
            <el-descriptions-item label="用户手机号">{{ order.mobile }}</el-descriptions-item>
            <el-descriptions-item label="金额"><el-tag>{{ order.amount }}</el-tag></el-descriptions-item>
            <el-descriptions-item label="院线"><el-tag>{{ order.lineName }}</el-tag></el-descriptions-item>
            <el-descriptions-item label="影院"><el-tag>{{ order.cinemaName }}</el-tag></el-descriptions-item>
            <el-descriptions-item label="套餐名称">{{ order.cinemaBmhBatchName }}</el-descriptions-item>
            <el-descriptions-item label="套餐信息">{{ order.itemDesc }}</el-descriptions-item>
          </el-descriptions>
        </el-card>

        <el-card style="margin-top: 10px" v-show="order.id">
            <el-row :gutter="12" >
                <el-col :span="8">
                    <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" placeholder="请输入退款原因"
                        class="input-with-select" v-model="queryInfo.reason">
                    </el-input>
                </el-col>
            </el-row>
        </el-card>
        <el-card style="margin-top: 10px" v-show="order.id">
            <el-row :gutter="12" >
                <el-col :span="2">
                    <el-input placeholder="校验码" class="input-with-select" v-model="queryInfo.code"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="warning"  size="small" :disabled="!show" @click="getRefundCode()">
                         <span v-show="show">发送验证码</span>
                         <span v-show="!show" class="count">{{count}} s</span>
                    </el-button>
                </el-col>
            </el-row>
        </el-card>
        <el-card style="margin-top: 10px" v-show="order.id">
            <el-row :gutter="12" >
                <el-col :span="4">
                    <el-button type="danger" @click="applyRefund()" >申请退款</el-button>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
import Api from "@/api/Api.js";
import MovieApi from "@/api/Movie.js";
export default {
    data() {
        return {
            queryInfo: {
                id: "",
                reason:"",
                code:"",
                orderType:'bmh'
            },
            TIME_COUNT:60,
            show: true,
            count: '',
            timer: null,
            order: {},
        };
    },
    methods: {
      queryOrder() {
        MovieApi.getBmhOrder(this.queryInfo).then((res) => {
                if (res.success) {
                    this.order = res.data;
                } else {
                    this.order = {};
                    return this.$message.error("获取失败:" + res.msg);
                }
            });
        },
        applyRefund() {
            Api.applyRefund(this.queryInfo).then((res) => {
                if (res.success) {
                   return this.$message.success("申请成功，等待管理员处理退款");
                } else {
                    return this.$message.error("申请失败:" + res.msg);
                }
            });
        },
        getRefundCode() {
            Api.getRefundCode(this.queryInfo).then((res) => {
                if (res.success) {
                    if (!this.timer) {
                        this.count = this.TIME_COUNT
                        this.show = false
                        this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= this.TIME_COUNT) {
                            this.count--
                        } else {
                            this.show = true
                            clearInterval(this.timer)
                            this.timer = null
                        }
                        }, 1000)
                    }
                   return this.$message.success("发送成功，请向管理员索取验证码");
                } else {
                    return this.$message.error(res.msg);
                }
            });
        }
    },
};
</script>

<style>
.orderStatus {
    color:red;
    font-size: 18px;
}
</style>
